<template>
    <!--数据字典-->
    <section class="page user-manage">
        <div class="row">
            <div class="col-span-4 dataDict-tree node-title">
               <el-tree class="resource-tree" @node-click="handleNodeClick" :data="treeData" :expand-on-click-node="false" @current-change="onCurrentChange" highlight-current :default-expand-all="true" :default-expanded-keys="['root']" node-key="id" ref="tree">
                 <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <small style="padding-left:10px" class="icon-box">
                      <el-button v-show="node.level!==1"  type="text"  size="mini"  @click="add(data,node)">新增</el-button>
                      <el-button v-show="node.data.parentId!==null && node.level!==1"  type="text"  size="mini"  @click="modifyDataDict(data,node)">修改</el-button>
                      <el-button v-show="node.data.parentId!==null && node.level!==1"  type="text"  size="mini"  @click="open(data)">删除</el-button>
                    </small>
                  </span>
              </el-tree>
            </div>
            <div class="col-span-8">
                <data-box :data="tableData" ref="data-box">
                    <template slot="columns">
                        <el-table-column prop="parentLevel" label="父级" :min-width="$helper.getColumnWidth(1)" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="name" label="字段名称" :min-width="$helper.getColumnWidth(1)" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="dataStatus" label="字段状态" :min-width="$helper.getColumnWidth(1)"  show-overflow-tooltip>
                        <template slot-scope="scope">
                          <span>{{scope.row.dataStatus==='EFFECTIVE'?'有效':'无效'}}</span>
                        </template>
                        </el-table-column>
                        <el-table-column prop="priority" label="优先级" :min-width="$helper.getColumnWidth(1)" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="createDate" label="创建时间" :min-width="$helper.getColumnWidth(1)" :formatter="(row) => $filter.dateTimeFormat(row.createDate)"  show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作" :min-width="$helper.getColumnWidth(2)" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row); dialog.dialogTableVisible = true" type="text" size="small">修改</el-button>
                                <el-button v-if="scope.row.parentLevel!=='数据字典'&&scope.row.parentLevel" type="text" size="small" @click="open(data)">删除</el-button>
                            </template>
                        </el-table-column>
                    </template>
                </data-box>
            </div>
        </div>
       <el-dialog title="修改数据字典" @open="$nextTick(()=>$refs['modify-dataDict'].refresh(data,node))" width="450px" :visible.sync="dialog.dialogTableVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
          <modify-dataDict ref="modify-dataDict" @close="dialog.dialogTableVisible = false;"  @refreshList="refreshData" @refreshDataBox="refreshDataBox"></modify-dataDict>
        </el-dialog>
          <el-dialog title="新增数据字典" @open="$nextTick(()=>$refs['add-dataDict'].refresh(data,node))" width="450px" :visible.sync="dialog.addTableVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
          <add-dataDict :treeDatas="dataList" ref="add-dataDict" @close="dialog.addTableVisible = false;"  @refreshList="refreshData"></add-dataDict>
        </el-dialog>
    </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import DataBox from "~/components/common/data-box.vue";
import DataTree from "~/components/common/data-tree.vue";
import ModifyDataDict from '~/components/system-manage/data-dict/modify-dataDict.vue';
import AddDataDict from '~/components/system-manage/data-dict/add-dataDict.vue';
import { CommonService } from "~/utils/common.service";
import { DataPoolService } from "~/services/common-service/data-pool.service";
// import ResourceTree from "~/components/system-manage/role-manage/resource-tree.vue"
import { State } from "vuex-class";
// @Auth(14)
@Layout("workspace")
@Component({
  components: {
    DataTree,
    DataBox,
    ModifyDataDict,
    AddDataDict,
  }
})
export default class DataDict extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
   @Dependencies(DataPoolService)
  private dataPoolService: DataPoolService;
  @State private customDataDict;
  
  private data:any=[];
  private gridData:any = [];
  private CHEAT_TYPE:any=[];
  private treeData:any[]=[];
  private selected:any=false;
  private root:any={};
  private node:any={};
  private checked:any="";
  private tableData:any= [];
  private showEdit:any="";
  private dataList:any=[];
  private currentNode:any={
    id:"",
    parentLevel:""
  };
  
  private dialog: any = {
    dialogTableVisible: false,
    addTableVisible:false,
    modifyDataDict: false
  };

  private modifyDataDict(data,node){
    this.handleNodeClick(data,node)
    this.dialog.dialogTableVisible = true
  }
  private handleNodeClick(data,node){
    this.data=data
    this.node=node
    console.log(data,'666')
  }
 private handleClick(a) {
    console.log(a,"a");
    if(this.gridData.length !== 0) return this.gridData = [];
    this.gridData.push(a);
    console.log(this.gridData,"this.gridData");
 }


 private open(data) {
   const deleteData:any={
     dataPoolId:data.id
   }
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        this.dataPoolService
          .deleteDataDict(deleteData)
          .subscribe(
            (data) => {
              this.$message.success('删除成功');
              //刷新数据字典结构数据
              this.refreshData()
              //列表数据置空
              this.tableData = []
            },({ data }) => {
               this.$message.error(data.message)
            },);
    }).catch(() => {
               
    });
 }
/**
 * 新增
 */
 private add(data,node){
   this.handleNodeClick(data,node)
   this.dialog.addTableVisible = true
 }
 /**
  * 修改
  */
 private edit(){
   this.dialog.dialogTableVisible = true
 }
 private onCurrentChange(data,node){
   console.log(data,"data")
   console.log(node,"node")
   
   this.currentNode.id = data.id
   this.currentNode.parentLevel = node.parent.label
    // this.tableData.push({
    //   parentLevel:node.parent.label,
    //   name:data.name,
    //   priority:data.level,
    //   dataStatus:data.dataStatus,
    //   createDate:data.createTime,
    // })
    this.refreshDataBox()
   this.selected=true
   this.showEdit=node.data.parentId
 }
 private refreshDataBox(){
   this.tableData=[]
   this.dataPoolService.getDataPool({dataId:this.currentNode.id}).subscribe(
      (data) => {
        // console.log(data,"返显的data")
          this.tableData.push({
            parentLevel:this.currentNode.parentLevel,
            name:data.name,
            priority:data.level,
            dataStatus:data.dataStatus,
            createDate:data.createTime,
          })
    })
 }

 private createdTreeData(data){
  //  console.log(data,"3333")
    const option = {
      keyName: 'id',
      parentKeyName: 'parentId',
      sortKey: 'sort'
    }
    const tmpTreeData = CommonService.generateTreeData(data, option)
    // console.log(tmpTreeData,"tmpTreeData");
     const root = [{
       id: null,
       parentId: '',
       label: '数据字典',
       type: 'ROOT',
       sort: 0,
       children: tmpTreeData
     }]
    this.treeData = root
    console.log(this.treeData,"treeData")
 }
 private refreshData(){
  
   this.dataPoolService.getDataPools().subscribe(
            (data) => {
          this.dataList = data.map(v => {
          return {
            ...v,
            _checked: false,
            label: v.name
          }
        }).sort((a, b) => a.sort - b.sort)
        // console.log(dataList,'dataList')
        this.createdTreeData(this.dataList)
            });
 }
  private mounted() {
    this.refreshData();
  }
  private created(){
    this.refreshData();
  }

  private refreshList(){
    
  }
}
</script>

<style lang="less" scoped>
.page.user-manage {
  .resource-tree {
    flex-basis: 200px;
  }
  .col-span-4 {
    padding: 10px 10px;
  }
  .dataDict-tree {
    border: solid 1px #e4e4e4;
    min-height: 600px;
    min-width: 350px;
    overflow-x: auto;
  }
}
</style>
 
<style lang="less">
// 数据字典加滚动条
.page.user-manage {
  .el-tree>.el-tree-node{
      min-width:100%;
      display: inline-block !important;
    }
}
</style>

